<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        float: left;
        width: 300px;
        height: 50px;
        background-color: #f00;
        border: 1px solid green;
        /* box-sizing: border-box; */
        line-height: 30px;
        margin-left: -1px;
        text-decoration: underline;
      }

      /* .box:hover {
        border-bottom: 10px solid #0f0;
      } */

      /* .active {
        border-bottom: 10px solid #f00;
      } */
    </style>
  </head>

  <body>
    <div class="box active a b ">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </body>

</html>